<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="申请代理" left-arrow fixed @click-left="onClickLeft" />
    <div class="level_title" v-for="item, index in levelInfo" :key="index">
      <div class="level_title_btn" v-if="item.type==1">
        <div class="title"><img src="../../../images/order-shop-icon.png" alt=""> {{ item.title }}</div>
        <div class="btn" @click="getLevel(item.button_disable,item.button_key, item.level, item.title)">{{ item.button_text }}</div>
      </div>
      <div v-else class="agent_applys">
        <!-- <div class="level_title_btn"> -->
        <div class="title">{{ item.title }}</div>
        <div class="agent_applys_btn">
          <div class="agent_progress">
            <span>0</span>
            <div>
              <van-progress :percentage="item.percentage*100" :pivot-text="String(item.now_val)" stroke-width="8" track-color="#F2F4F5" color="#31A653" />
            </div>
            <span>{{ item.req_val }}</span>
          </div>
          <!-- button_disable==true -->
          <div  :class="item.button_disable?'btn btn_disable':'btn'" @click="getLevel(item.button_disable,item.button_key, item.level, item.title)">{{ item.button_text }}</div>
        </div>

        <!-- </div> -->
        <div class="level_title_text" v-if="item.tip_msg" v-html="item.tip_msg.replace(/\n/g, '<br>')">
        </div>
      </div>

      <!-- <div style="width: 80%;padding:0 .2rem;box-sizing: border-box;">
       
      </div> -->

    </div>
    <!--       
    <van-popup v-model="levelShow" position="bottom">
      <van-picker title="选择级别" value-key="name" show-toolbar :columns="options" @confirm="onConfirmBig"
        @cancel="levelShow = false" :value="cascaderValue" />
    </van-popup> -->
  </div>
</template>
<script>
import { AGENT_APPLY_DATA, SERVICE_BUY, USER_LEVEL_OPTIONS } from '@/api/mine'
export default {
  data() {
    return {
      levelInfo: {},
      options: [],
      levelShow: false,
      cascaderValue: '',
      background: '',
      name: '',
      level: '',
      extra_tag: '',
      text_color: ''
    };
  },
  mounted() {
    document.title = '申请代理'
    window.scrollTo(0, 0)
    localStorage.removeItem('levelInfo')
    this.getLevelInfo()
  },
  methods: {
    getLevelInfo() {
      // this.levelInfo = [
      //   {
      //     "title": "我的区县级服务中心",
      //     "button_text": "详情",
      //     "button_key": "agent_info",
      //     "content": "111",
      //     "level": 3,
      //     "level_name": "区县级服务中心"
      //   },
      //   {
      //     "title": "我的市级运营中心",
      //     "button_text": "申请市代",
      //     "button_key": "agent_apply",
      //     "content": "直推三个曲线代理即可",
      //     "level": 2,
      //     "level_name": "市级运营中心"
      //   },
      //   {
      //     "title": "我的省级管理中心",
      //     "button_text": "申请区代",
      //     "button_key": "agent_apply",
      //     "content": "",
      //     "level": 1,
      //     "level_name": "省级管理中心"
      //   }
      // ]
      this.$http.get(AGENT_APPLY_DATA).then(res => {
        this.levelInfo = res.data
      })
    },
    onClickLeft() {
      this.$router.back();
    },
    getLevel(button_disable,key, level, name) {
      if(button_disable==true) {
        return
      }
      if (key == 'level_buy') {
        // 去购买
        let params = {
          type: 1,
          level: level
        }
        this.$http.post(SERVICE_BUY, params).then(res => {
          this.$router.push({ path: '/levelCashier' })
          res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
          localStorage.setItem('cashOrder', JSON.stringify(res.data))
        })
        //
      } else if (key == 'agent_apply') {
        this.getApplyAgent(level, name)
      } else if (key == 'agent_info') {
        console.log(11);
        
        this.getMyAgent(level)
      } else if (key == 'big_agent_apply') {
        this.getApplyAgent(level, name)
      } else if (key == 'big_agent_info') {
        this.getMyAgent(level)
      }
    },
    // 我的代理
    getMyAgent(level) {
      this.$router.push({ path: '/myAgent', query: { level } })
    },
    // 申请代理
    getApplyAgent(level, name) {
      this.$router.push({ path: '/agentQuery', query: { level} })
    }
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: 100vh;
  padding-top: 46px;
  padding-bottom: 1.2rem;
  background: #f2f4f5;
  box-sizing: border-box;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}

.level {
  position: relative;
  width: 7.02rem;
  height: 2.9rem;
  margin: 0 auto;

  .level_info {
    // width: 1.4rem;
    height: 0.44rem;
    font-size: 0.24rem;
    font-weight: 500;
    // line-height: 0.44rem;
    background: #ffffff;
    border-radius: 0px 100px 100px 0px;
    color: #333;
    padding-left: .2rem;
    padding-right: 0.18rem;
    position: absolute;
    top: 0.7rem;
  }

  .level_tag {
    position: absolute;
    bottom: .3rem;
    right: 50%;
    transform: translateX(-50%);
    ;
    font-size: 0.24rem;
    font-weight: 500;
    line-height: 0.44rem;
  }

  img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;

  }
}

.level_data {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;

  .level_data_img {
    background: #f5f7fe;
    border-radius: 8px 8px 0px 0px;
    // opacity: 0.06;
    padding: 0.2rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
    // line-height: 0.4rem;
    // text-align: left;
    color: #333333;
    font-style: normal;

    img {
      width: 0.32rem;
      vertical-align: middle;
    }
  }

  .level_data_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    padding-left: 0.2rem;
    margin-top: 0.2rem;

    .tips {
      margin-bottom: 0.12rem;
      color: #F32A23;
    }
  }
}

.level_title {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  // padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;

  .agent_applys {
    padding: 0.2rem;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      font-style: normal;
    }

    .agent_applys_btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: .2rem;
      .agent_progress {
        width: 60%;
        display: flex;
        align-items: center;
        div {
          width: 98%;
          margin: 0 .04rem;
          ::v-deep .van-progress__pivot {
            width: auto !important;
            border-radius: 50px;
            border: 1px solid #31A653;
            background: #fff !important;
            color: #31A653;
          }
        }

        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: .24rem;
          color: #666666;
        }


      }

      .btn {
        padding: 0.1rem 0.3rem;
        background: linear-gradient(136deg, #6EC069 0%, #42A633 100%);
        border-radius: 0.28rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 0.24rem;
        color: #ffffff;
        // line-height: 0.34rem;
        //   text-align: left;
        font-style: normal;
      }
      .btn_disable{
        // background: #e1e0e0;
        opacity: 0.6;
      }
    }
  }

  .level_title_btn {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    align-items: center;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      display: flex;
      align-items: center;
      font-style: normal;
      img{
        width: .52rem;
        margin-right: .2rem;
      }
    }

    .btn {
      padding: 0.1rem 0.3rem;
      border: 1px solid #31A653;
      background: #fff;
      border-radius: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #31A653;
      // line-height: 0.34rem;
      //   text-align: left;
      font-style: normal;
    }
  }

  .level_title_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    margin-left: 0.2rem;
    margin-top: .6rem;
    // padding-bottom: 0.2rem;
  }
}
</style>
